<template>
	<view class="box">
		<view class="cu-bar tabbar " :class="[bgColor,{'foot':isBottom}]">
			<view class="action " v-for="(item, index) in elements" :key="index" @click="onClick" :data-index="index" :class="[{'add-action':isOut&&index==2},selectIndex==index?'text-green':'text-gray']">
				<button v-if="isOut&&index==2" class="cu-btn bg-green shadow" :class="['cuIcon-' + item.cuIcon]"></button>
				<view v-else-if="item.image != null" class="cuIcon-cu-image">
					<image :src="item.image"></image>
					<view class="cu-tag badge" v-if="item.badge > 0">{{ item.badge }}</view>
				</view>
				<view v-else :class="['cuIcon-' + item.cuIcon]">
					<view class="cu-tag badge" v-if="item.badge > 0">{{ item.badge }}</view>
				</view>
				<view :class="[selectIndex==index?'text-green':'text-gray']">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'cu-custom',
		computed: {
			...mapState([])
		},
		data() {
			return {
				elements: [{
						title: '首页',
						out: false,
						badge: 0,
						image: null,
						cuIcon: 'homefill',
						path:'/pages/shop/index'
					},
					{
						title: '分类',
						out: false,
						badge: 0,
						image: null,
						cuIcon: 'similar',
						path:'/pages/shop/classify'
					},
					{
						title: '发现',
						out: true,
						badge: 0,
						image: null,
						cuIcon: 'add',
						path:'/pages/shop/discover'
					},
					{
						title: '购物车',
						out: false,
						badge: 0,
						image: null,
						cuIcon: 'comment',
						path:'/pages/shop/cart'
					},
					{
						title: '我的',
						out: false,
						badge: 0,
						image: null,
						cuIcon: 'my',
						path:'/pages/shop/my'
					}
				]
			};
		},
		props: {
			datas: {},
			selectIndex: {
				type: [Number, String],
				default: 0
			},
			bgColor: {
				type: String,
				default: 'bg-white'
			},
			isOut: {
				type: [Boolean, String],
				default: false
			},
			isBottom: {
				type: [Boolean, String],
				default: false
			}
		},
		methods: {
			onClick(e) {
				let index = e.currentTarget.dataset.index;
				
				this.$util.redirectTo(this.elements[index].path);
				this.$emit('onswitch', index);
			},
			onRight() {
				this.$emit('onright', true);
			}
		}
	};
</script>

<style scoped>
	.box {
		margin: 50upx 0;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}
</style>
